<template>
    <div class="box">
        <header class="header">
            <div>
                个人中心
            </div>
        </header>
        <div class="content">
            <div class="images">
                <img src="../../../public/QQ图片20210812102122.jpg" alt="">
            </div>
            <div class="con">
                <!-- <p>tel:{{tel}}</p> -->
                <p @click="$router.push('/cart')">我的购物车</p>
                <p @click="$router.push({name:'order2', params: {time:''}})">订单地址</p>
                <p @click="changePassword">修改密码</p>
                <p @click="logout">退出登录</p>

            </div>

        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { updatePassword, userInfo } from '../../api/user'

export default {
    data () {
        return {
            nickName:'',
            tel:''
        }
    },
    mounted () {
        userInfo({ userid: localStorage.getItem('userid') }).then(res => {
            res.data.data.forEach(item => {
                console.log(item);
                let { nickname,tel } = item
                this.nickName = nickname
                this.tel = tel
                console.log(this.nickName);
            });
        })
    },
    methods:{
        ...mapMutations({
            changeLoginState:'changeLoginState'
        }),
        logout () {
            localStorage.removeItem('userid')
            localStorage.removeItem('token')
            localStorage.removeItem('isLogin')
            this.$router.replace('/login')
            // this.$store.commit('changeLoginState', false)
            this.changeLoginState(false)
        },
        changePassword () {
            updatePassword ({ 
                userid: localStorage.getItem('userid')
            }) 
        }
    }
}
</script>

<style lang="stylus" scoped>
.header
  text-align center
  line-height 44px
  height 0.44rem
  color white
.container .box .header  
  background #c82519

.content
  position relative

.con
  width 250px
  height 200px
  position absolute
  top 54%
  left 50%
  transform translate(-50%,-50%)
  font-size 20px
.con p
  width 250px
  border-radius 20px
  border 1px solid gray
  margin-bottom 30px
  text-align center
  padding 7px 0


.content .images
  margin-top 30px 
  text-align center
.content .images img{
    width 150px
    border-radius 50%
}
</style>
